<template>
  <!-- ！！！司机管理！！！ -->
  <div class="branches">
    <div class="app-container">
      <!-- 上 -->
      <div class="top background">
        <div class="input">
          <span>司机账号:</span>
          <el-input v-model="pageParams.account" medium placeholder="请输入司机账号" type="text" style="width: 250px; margin: 10px;" />
        </div>
        <div class="input">
          <span>司机姓名:</span>
          <el-input v-model="pageParams.name" medium placeholder="请输入司机姓名" type="text" style="width: 250px; margin: 10px; " />
        </div>
        <div class="input">
          <span>司机手机号码:</span>
          <el-input v-model="pageParams.phone" medium placeholder="请输入司机手机号码" type="text" style="width: 250px; margin: 10px;" />
        </div>
        <div class="input">
          <span>所属机构:</span>
          <el-cascader
            v-model="pageParams.agentId"
            placeholder="请输入所属机构"
            :options="tree"
            :props="defaultProps"
            :show-all-levels="false"
            clearable
            @change="handleChange"
          />
        </div>
        <div class="input">
          <el-button medium type="primary" @click="seek">搜索</el-button>
          <el-button medium @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 下 -->
      <div class="button background">
        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          stripe
        >
          <el-table-column
            type="index"
            label="序号"
            width="150"
          />
          <el-table-column
            prop="account"
            label="司机账号"
            width="300"
          />
          <el-table-column
            prop="name"
            label="司机姓名"
            width="300"
          />
          <el-table-column
            prop="mobile"
            label="司机手机号"
            width="250"
          />
          <el-table-column
            prop="agency.name"
            label="所属机构"
            width="300"
          />

          <el-table-column fixed="right" label="操作">
            <template v-slot="{row}">
              <el-button
                type="text"
                size="small"
                @click.native.prevent="look(row)"
              >
                查看
              </el-button>
              <span style="color: #ccccccba; margin-left: 5px; margin-right: 5px;">|</span>
              <el-button
                type="text"
                size="small"
                @click.native.prevent="vehicle(row.userId)"
              >
                配置车辆
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
          <el-pagination
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageParams.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

    </div>

    <Configuration :current-node-id.sync="currentNodeId" :show-dialog.sync="showDialog" />
  </div>
</template>

<script>
import { getdriver } from '@/api/driver'
import { getTree } from '@/api/courier'
import Configuration from './configuration.vue'
export default {
  components: { Configuration },
  data() {
    return {
      currentNodeId: null, // 记录id
      showDialog: false, // 车辆配置-开关
      tree: [],
      tableData: [],
      pageParams: {
        page: 1,
        pageSize: 10,
        agentId: '',
        name: '',
        phone: '',
        account: '' // 司机编码
      },
      counts: 0,
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id',
        checkStrictly: true,
        emitPath: false
      }
    }
  },
  created() {
    this.getdriverList()
    this.TreeList()
  },
  methods: {
    // 列表
    async getdriverList() {
      const res = await getdriver(this.pageParams)
      this.counts = Number(res.data.counts)
      this.tableData = res.data.items
      console.log(this.tableData)
    },
    // 搜索
    seek() {
      this.getdriverList()
      // 所属机构 未完成
    },
    // 重置
    reset() {
      this.pageParams.agentId = ''
      this.pageParams.name = ''
      this.pageParams.phone = ''
      this.pageParams.account = ''
      this.getdriverList()
    },
    // 查看
    look(row) {
      // console.log(row)
      this.$router.push(`/transit2/driver/detail/${row.userId}`)
    },
    handleChange(value) {
      console.log(value)
    },
    // 机构列表
    async TreeList() {
      const res = await getTree()
      // console.log(res.data)
      this.tree = JSON.parse(res.data)
      // console.log(this.tree)
    },
    // 页码发生改变
    handleSizeChange(newPageSize) {
      this.pageParams.pageSize = newPageSize
      this.getdriverList()
    },
    // 页数发生改变
    handleCurrentChange(newPage) {
      this.pageParams.page = newPage
      this.getdriverList()
    },
    // 车辆配置
    vehicle(id) {
      this.$confirm('<strong>配置车辆需满足一下条件</strong><br/><br/><div><span style="margin-right: 20px;" >1.司机信息</span ><span>2.司机已设置排班</span></div><br/<div>3.司机绑定车辆未在启动状态</div>', '车辆配置', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        console.log('成功')
        this.showDialog = true
        console.log(id)
        this.currentNodeId = id
        console.log(this.showDialog)
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped>
.branches{
  margin-left: 20px;
  margin-right: 20px;
}
.background{
  background: #ffffff;
  margin-bottom:25px ;
  padding: 30px;
}
.top{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: baseline;
  padding-left: 50px;
}
/* .button{
  height: 700px;
} */
.input{
  margin-right: 45px;
  width: 400px;
}
.block{
  font-size: 24px;
  margin-top: 50px;
  display:flex;
  justify-content: center;
}
</style>
